<style lang="less">
     @import './index.less';
</style>

<template>
<div>
  <Button icon="reply" type="text" @click="goForward">上一步</Button>
  <Card dis-hover>
    <Row :gutter="10">
        <i-col span="18">
          <div style="padding:10px">
            <h2>{{productInfo.product_name}}</h2>
            <span>创建时间：{{productInfo.create_time}}</span>
          </div>
        </i-col>
        <i-col span="6" class="margin-top-15">
          <modifyBtn @modifyClick="modifyHandle"></modifyBtn>
        </i-col>
      </Row>
  </Card>
  <Row :gutter="10" class="margin-top-10">
    <i-col span="17">
      <Card dis-hover>
        <Tabs value="1">
          <TabPane label="基本信息" name="1">
            <div class="box">
              <p>产品名称：{{productInfo.product_name}}</p>
              <p class="margin-top-5">产品价格：{{productInfo.price}}元</p>
              <p class="margin-top-5">产品类型：{{productInfo.tag}}</p>
            </div>
          </TabPane>
        </Tabs>
      </Card>
    </i-col>
    <i-col span="7">
      <Card dis-hover>
        <Tabs value="1">
            <TabPane label="动态" name="1">
              <p>动态里的内容</p>
            </TabPane>
            <TabPane label="团队成员" name="2">
              <p>团队成员里的内容</p>
            </TabPane>
        </Tabs>
      </Card>
    </i-col>
  </Row>
  <Modal title="修改产品信息" width="1000" v-model="modifyModal" ok-text="修改" @on-ok="submitModify('modifyForm')" @on-cancel="cancel" :loading="loading">
    <Row>
      <i-col span="16" offset="4">
        <Form :model="modifyForm" ref="modifyForm" :rules="ruleValidate" :label-width="80">
          <FormItem label="产品类型">
            <Row>
              <i-col span="6">
                <Select v-model="modifyForm.level1" @on-change="getLevel2">
                  <Option v-for="(item,index) in selectDataLevel_1" :key="index" :value="item.label" >{{item.label}}</Option>
                </Select>
              </i-col>
              <i-col span="6">
                <Select v-model="modifyForm.level2" @on-change="getLevel3">
                  <Option v-for="(item,index) in selectDataLevel_2" :key="index" :value="item.label" >{{item.label}}</Option>
                </Select>
              </i-col>
              <i-col span="6">
                <Select v-model="modifyForm.level3" @on-change="getLevel4">
                  <Option v-for="(item,index) in selectDataLevel_3" :key="index" :value="item.label" >{{item.label}}</Option>
                </Select>
              </i-col>
              <i-col span="6">
                <Select v-model="modifyForm.level4">
                  <Option v-for="(item,index) in selectDataLevel_4" :key="index" :value="item.label" >{{item.label}}</Option>
                </Select>
              </i-col>
            </Row>
          </FormItem>
          <FormItem label="产品名称" prop="product_name">
              <Input v-model="modifyForm.product_name"></Input>
          </FormItem>
          <FormItem label="标准单价" prop="price">
              <Input v-model="modifyForm.price"></Input>
          </FormItem>
        </Form>
      </i-col>
    </Row>
  </Modal>
</div>
  
</template>

<script>
import data from './data';
import modifyBtn from './component/access-modify-button.vue';

export default {
  data() {
    return {
      productInfo:{},
      selectDataLevel_1:data,
      selectDataLevel_2:[],
      selectDataLevel_3:[],
      selectDataLevel_4:[],
      modifyModal:false,
      loading:true,
      modifyForm:{},
      ruleValidate:{
        product_name:[
          { required: true, message: '商品名称不能为空', trigger: 'blur' }
        ],
        price:[
          { required: true, type: 'number',message: '商品单价不能为空', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    goForward() {
      this.$router.go(-1)
    },
    modifyHandle() {
      this.modifyForm = _.cloneDeep(this.productInfo)
      this.modifyModal = true
    },
    getLevel2(value){
      if(value) {
        this.selectDataLevel_2 = this.selectDataLevel_1[_.findIndex(this.selectDataLevel_1,{label:value})].child
        this.selectDataLevel_3 = []
        this.selectDataLevel_4 = []
      }
    },
    getLevel3(value) {
      if(value){
        this.selectDataLevel_3 = this.selectDataLevel_2[_.findIndex(this.selectDataLevel_2,{label:value})].child
        this.selectDataLevel_4 = []
      }
    },
    getLevel4(value) {
      if(value) {
        this.selectDataLevel_4 = this.selectDataLevel_3[_.findIndex(this.selectDataLevel_3,{label:value})].child
      }
    },
    submitModify(name) {
      this.$refs[name].validate((valid) => {
        if(valid) {
          this.$http.put('/sale/products',this.modifyForm).then((res)=> {
            this.$Message.success('修改成功')
            this.productInfo = this.modifyForm
            this.modifyModal = false
          })
        }else{
          this.loading = false
          this.$nextTick(() => {
            this.loading = true
          })
        }
      })
    },
    cancel() {
      this.modifyModal = false
    }
  },
  components: {
    modifyBtn
  },
  mounted() {
    this.productInfo = this.$route.query
    this.productInfo.create_time = this.productInfo.create_time.split(' ')[0]
  }
}
</script>

